export const directiveMixins = {
  directives: {
    // 封装指令，下拉到一定距离时才显示顶部内容，监测事件：document的onscroll事件
    // 不能配合隐藏滚动条的 .hidden-scrollbar 类使用
    appeartop: {
      inserted (el, binding) {
        el.style['z-index'] = 10
        el.style.display = 'none'
        document.onscroll = function () {
          const topValue = binding.value ? binding.value : 0
          if (document.documentElement.scrollTop > topValue) {
            el.style.display = 'block'
          } else {
            el.style.display = 'none'
          }
        }
      },
      unbind () {
        document.onscroll = null
      }
    },
    // 封装指令，下拉到一定距离时才显示顶部内容，监测事件：当前组件根元素的onscroll事件
    // 需要配合在组件根元素上定义 .hidden-scrollbar 类
    appeartopvm: {
      inserted (el, binding, vnode) {
        // 利用vnode.context可获取到当前组件的this
        const vmDom = vnode.context.$el // 获取当前组件根元素的真实DOM
        el.style['z-index'] = 10
        el.style.display = 'none'
        vmDom.onscroll = function () {
          const topValue = binding.value ? binding.value : 0
          if (vmDom.scrollTop > topValue) {
            el.style.display = 'block'
          } else {
            el.style.display = 'none'
          }
        }
      },
      unbind (el, binding, vnode) {
        vnode.context.$el.onscroll = null
      }
    },
    // 封装指令，在距离顶部指定距离的位置时使元素开启粘性定位
    stickytop: {
      inserted (el, binding) {
        el.style.position = 'sticky'
        el.style.top = binding.value ? binding.value + 'px' : '0px'
        el.style['z-index'] = 10
      }
    },
    // 封装指令，将元素定位设为fixed，并传入对应的top值
    fixedtop: {
      inserted (el, binding) {
        el.style.position = 'fixed'
        el.style.width = '100vw'
        el.style.top = binding.value ? binding.value + 'px' : '0px'
        el.style['z-index'] = 10
      }
    }
  }
}
